<template>
  <div>
        <header 
      id="header" 
      class="mui-bar mui-bar-nav" 
    >
      
      <h1 class="mui-title">验证成功</h1>
      <button class="  mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left" @click="goback"><span class="mui-icon mui-icon-left-nav"/>返回</button>
    </header>
    <!-- v-if="$route.query.errormsg=='验证成功'" -->
    <div v-if="$route.query.errormsg=='验证成功'">
      <img 
        src="/images/success1.png" 
        class="errorimg">
      <p class="errormsg">消费验证成功！<br>已使用{{ cardData.surplus }}次 / 共{{ cardData.num }}次</p>
    </div>
    <div v-else>
      <img 
        src="images/error.png" 
        class="errorimg">
      <p class="errormsg">{{ $route.query.errormsg }}</p>
    </div>


    
    
  </div>
</template>

<script>
export default {
  layout: 'default3',
  data() {
    return {
      cardData: {},
      ts: this.newStore()
    }
  },
  created() {
    this.getpayinfo()
  },
  methods: {
    getpayinfo() {
      this.cardData = {}
      const req = {
        token: localStorage.getItem('token'),
        orderno: this.$route.query.orderno,
        nowtime: this.$route.query.nowtime,
        ordertoken: this.$route.query.ordertoken
      }
      this.spost(this.ts, '/Orderc/Settlement', req).then(ts => {
        if (ts.d.flag == 200) {
          this.cardData = ts.d.data
        } else {
          mui.alert(ts.d.message, '提示')
        }
      })
    },
    goback(){
      this.$router.push({name:'fhome'})
    }
  }
}
</script>

<style>
.errorimg {
  position: relative;
  margin-top: 30px;
  height: auto;
  width: 200px;
  display: block;
  margin: 100px auto;
}
.errormsg {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 15%;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1px;
  width: 70%;
}
</style>
